<template>
  <div class="page circle">
    <div class="map">
      <CircleMap :tab-active="tabActive"/>
    </div>
    <div class="tab-block">
      <div @click="tabActive=1" :class="tabActive===1?'active':''" class="tab-item">
        <img
            :src="tabActive===1?require('@/assets/images/tab-icon-1-active.png'):require('@/assets/images/tab-icon-1.png')"
            class="tab-icon">
        <div class="tab-name">显示全部</div>
      </div>
      <div @click="tabActive=2" :class="tabActive===2?'active':''" class="tab-item">
        <img
            :src="tabActive===2?require('@/assets/images/tab-icon-2-active.png'):require('@/assets/images/tab-icon-2.png')"
            class="tab-icon">
        <div class="tab-name">警务站分布</div>
      </div>
      <!-- <div @click="tabActive=3" :class="tabActive===3?'active':''" class="tab-item">
        <img
            :src="tabActive===3?require('@/assets/images/tab-icon-3-active.png'):require('@/assets/images/tab-icon-3.png')"
            class="tab-icon">
        <div class="tab-name">无人机巡逻</div>
      </div> -->
     
      <div @click="tabActive=4" :class="tabActive===4?'active':''" class="tab-item">
        <img
            :src="tabActive===4?require('@/assets/images/tab-icon-4-active.png'):require('@/assets/images/tab-icon-4.png')"
            class="tab-icon">
        <div class="tab-name">快反圈范围</div>
      </div>
      <div @click="dialog1.show=true" class="tab-item">
        <img src="@/assets/images/tab-icon-3.png" class="tab-icon">
        <div class="tab-name">无人机预警</div>
      </div>
      <!-- <div @click="dialog.show=true" class="tab-item">
        <img src="@/assets/images/tab-icon-5.png" class="tab-icon">
        <div class="tab-name">部署图</div>
      </div> -->
    </div>
    <Dialog v-if="dialog.show" :info="dialog">
      <img style="width: 100%"
           src="https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/guangchang/%E5%BF%AB%E5%8F%8D%E9%83%A8%E7%BD%B2%E5%9B%BE.jpg"
           alt="">
    </Dialog>
    <Dialog v-if="dialog1.show" :info="dialog1">
      <video 
        ref="warningVideo"
        style="width: 100%"
        src="https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/guangchang/55e71b93-c8b9-4170-82c1-d42b7abd99fb.mp4"
        controls
        autoplay
        loop
      ></video>
    </Dialog>
  </div>
</template>
<script>
import CircleMap from "@/components/Circle/CircleMap.vue";
import Petition from "@/components/Home/Detail/Petition.vue";
import Dialog from "@/components/Dialog.vue";

export default {
  components: {Dialog, Petition, CircleMap},
  data() {
    return {
      tabActive: 1,
      dialog: {
        show: false,
        width: '900px',
        title: '快反圈部署图'
      },
      dialog1: {
        show: false,
        width: '900px',
        title: '无人机预警'
      }
    }
  },
  watch: {
    'dialog1.show': function(newVal) {
      if (!newVal && this.$refs.warningVideo) {
        this.$refs.warningVideo.pause();
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.page.circle {
  .map {
    width: 100vw;
    height: 100vh;
    z-index: 1;
    position: fixed;
    left: 0;
    top: 0;
  }

  .tab-block {
    width: 900px;
    position: fixed;
    transform: translate(-50%, 0);
    left: 50%;
    bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 2;

    .tab-item {
      padding: 8px 20px;
      border-radius: 8px;
      background: rgba(34, 223, 233, 0.1);
      border: 1px solid $fontColorMain;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;

      .tab-icon {
        width: 20px;
        height: 20px;
        margin-right: 10px;
      }

      .tab-name {
        font-weight: bold;
        font-size: 17px;
        color: $fontColorMain;
      }
    }

    .tab-item.active {
      background: rgba(254, 213, 47, 0.1);
      border-color: $fontColorYellow;

      .tab-name {
        color: $fontColorYellow;
      }
    }
  }
}
</style>
